// 一.实现表白墙展示
let ConversationDiv = document.querySelector('.Conversation');
let inputs = document.querySelectorAll('input');
let submit = document.querySelector('#submit');

submit.onclick = function(){
    // 1.获取到三个input的值
    let from = inputs[0].value;
    let to = inputs[1].value;
    let mesg = inputs[2].value;
    if(from == '' || to == '' || mesg == ''){
        return;
    }
    // 2.构造新的展示div
    let resultDiv = document.createElement('div');
    resultDiv.className = 'row message result';
    resultDiv.innerHTML = from + ' 对: ' + to + ' 说: ' + mesg;
    ConversationDiv.appendChild(resultDiv);
    // 3.清空表格中的内容
    for(let input of inputs){
        input.value = '';
    }

    // 【新增一】 按下提交时，使用ajax(得先引入jquery)给服务器发送一条post请求
    // 注意：body内的数据的名称(左边)必须和后端的使用jackson解析成的 Message的字段类型一致；右边的则是上面定义获取的变量
    let body = {
        "from":from,
        "to":to,
        "message":mesg
    }
    let jsonBody = JSON.stringify(body);
    $.ajax({
        type: 'post',
        url: './message',
        contentType: 'application/json; charset=utf-8',
        data: jsonBody,
        success: function(){
            // 这里的body是响应报文json格式的字符串 转换成的js对象
            console.log("请求发送成功！");
        }
    })
}
// 【新增二】 页面加载时，从服务器获取 所有信息并显示在浏览器上
$.ajax({
    type: 'get',
    url: './message',
    success: function(body){
        console.log("响应接收成功！");
        let ConversationDiv = document.querySelector('.Conversation');
        for(let message of body){
            // 对每一个message元素构造一个div
            let resultDiv = document.createElement('div');
            resultDiv.className = 'row message result';
            resultDiv.innerHTML = message.from + ' 对: ' + message.to + ' 说: ' + message.message;
            ConversationDiv.appendChild(resultDiv);
        }
    }
})


// 二.重置时把表格下的最后一条内容清除
let reset = document.querySelector('#reset');
reset.onclick = function(){
    //【新增三】 点击重置时，不是直接删除最后一个节点，而是发送delete请求，服务器处理delete请求，然后显示剩下的所有信息
    $.ajax({
        type: 'delete',
        url: './message',
        success: function(body){
            // 1.先选中父元素ConversationDiv，然后删除所有子元素
            let ConversationDiv = document.querySelector('.Conversation');
            while(ConversationDiv.firstChild){
                ConversationDiv.removeChild(ConversationDiv.firstChild)
            }

            for(let message of body){
                // 2.对响应数据内容进行页面显示，对每一个message元素构造一个div
                let resultDiv = document.createElement('div');
                resultDiv.className = 'row message result';
                resultDiv.innerHTML = message.from + ' 对: ' + message.to + ' 说: ' + message.message;
                ConversationDiv.appendChild(resultDiv);
            }
        }
    })
}